
<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons :size="20" type="search" color="#999"></uni-icons>
        <text class="placeholder">搜索课程</text>
      </view>
    </view>
    <!-- 轮播图 -->
	<!-- <Swiper></Swiper> -->
    <!-- 课程分类 -->
<!--    <view class="section">
      <view class="section-title">课程分类</view>
      <view class="category-grid">
        <view v-for="(item, index) in menu.categories" :key="index" class="category-item" >
          <image class="category-icon" :src="item.imgSrc" mode="aspectFit" />
          <text class="category-name">{{ item.categoryName }}</text>
        </view>
      </view>
    </view> -->
    <view class="section" v-for="item in treeData" :key="item.categoryId">
      <view class="section-title">{{item.categoryName}}</view>
      <view >
		
        <view  v-for="(itChidren, index) in item.stages" :key="index" >
        <text class="tech-name stageName">{{ itChidren.stageName }}</text>
<!-- 		<view class="totalPrice">
			<text class="tech-name">购买此阶段({{ itChidren.totalPrice}})元</text>
		</view> -->
	
		  <view   class="tech-grid">
			  <view v-for="(itCh, index) in itChidren.courses" :key="index" >
				   <!-- <image class="tech-icon" :src="itChidren.imgSrc" mode="aspectFit" /> -->
				   <view class="tech-item"  @tap="toClass(itCh)">
					<view class="tech-item-img"></view>
					<img   class="tech-icon" src="https://ai-public.mastergo.com/ai/img_res/74ffe60c2f4597306a661b48e9e24fe3.jpg" draggable="false">
				    <text  class="courseName">{{ itCh.courseName }}</text> 
					</view>

			  </view>
			 
		  </view>
        </view>
      </view>
    </view>
	
<!--    <view class="section" v-for="item in menu.categories" :key="item.categoryId">
      <view class="section-title">{{item.categoryName}}</view>
      <view class="tech-grid">
        <view v-for="(itChidren, index) in item.chilren" :key="index" class="tech-item">
          <image class="tech-icon" :src="itChidren.imgSrc" mode="aspectFit" />
          <text class="tech-name">{{ itChidren.categoryName }}</text>
        </view>
      </view>
    </view> -->


    <!-- 底部导航栏 -->
<!--    <view class="tab-bar">
      <view v-for="(item, index) in tabItems" :key="index" class="tab-item">
        <uni-icons :type="item.icon" size="24" :color="currentTab === index ? '#2196F3' : '#999'"></uni-icons>
        <text class="tab-text" :class="{ active: currentTab === index }">{{ item.name }}</text>
      </view>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import Swiper from '@/components/Swiper.vue';
// import { useApiStore } from '@/pages/stores/api.js'
import { post1,getChapterPost } from '@/pages/utils/api/clazz.js'

const currentTab = ref(0);
// const apiStore = useApiStore()
const userData = ref(null)
const loading = ref(false)
const bannerImage = 'https://ai-public.mastergo.com/ai/img_res/cc61849c3bad07a4d6b049c0a2c0dc50.jpg';

const frontendCourses = [
  {
    name: 'Vue',
    icon: 'https://ai-public.mastergo.com/ai/img_res/4fb20734eece38deba97e5d8a7079df3.jpg'
  },
  {
    name: 'React',
    icon: 'https://ai-public.mastergo.com/ai/img_res/9a9d66a4a8e8e9f93a20db92efe8e514.jpg'
  },
  {
    name: 'Angular',
    icon: 'https://ai-public.mastergo.com/ai/img_res/b592367eb22e0aaecc3c1bd9aba6d44f.jpg'
  }
];
const menu=ref({
	categories:[]
})
const treeData=ref([]) ;
const tabItems = [
  { name: '首页', icon: 'home' },
  { name: '发现', icon: 'search' },
  { name: '学习', icon: 'bookmark' },
  { name: '我的', icon: 'person' }
];
//  course/getChapter
const getChapter =  async () =>{
	try {
	  const res = await getChapterPost();
	  treeData.value = res.data;
      // treeData.value = transformToTree(res.data);
	  console.log('treeData', treeData)
	} catch (error) {
	  console.log('获取数据失败', error)
	}
}
const fetchData= async () =>{
	let data={
		parent_category_id:null,
		category_id:null
	}
      try {
        const res = await post1();
		console.log(res.data);
		initMenu(res.data)
        // this.userInfo = res.data
      } catch (error) {
        console.error('获取数据失败', error)
      }
    }
function initMenu(list: any){
	for(let item of list){
		if(item.parentCategoryId  == null ){
		   item.chilren=[]
			menu.value.categories.push(item);
		}
	}
	for(let item of list){
		for(let itemChild of menu.value.categories){
			if(item.parentCategoryId  == itemChild.categoryId ){
				itemChild.chilren.push(item)
			}
		}
	}
	console.log(menu.value);
}
function toClass(item){
  console.log(item,"item")
  uni.navigateTo({
    url: "/pages/clazz/index?courseId="+item.courseId+"&courseName="+item.courseName+"&description="+item.description,
    fail: (err) => {
      console.log('跳转失败详情:', err);
      uni.showToast({
        title: '跳转失败: ' + err.errMsg,
        icon: 'none'
      });
    },
    success: () => {
      console.log('跳转成功');
    }
  });
}


onMounted(()=>{
	getChapter();
	fetchData();
})
</script>

<style>
page {
  height: 100%;
}
.totalPrice{
	  padding: 20rpx 30rpx;
}
/* .stageName{
	  padding: 20rpx 30rpx;
} */
.container {
  min-height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
/* .tech-item-img{
    width: 3.125rem;
	height: 3.125rem;
	border-radius: 50%;
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-image: url("https://ai-public.mastergo.com/ai/img_res/74ffe60c2f4597306a661b48e9e24fe3.jpg");
} */
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
}
.totalPrice{
	background-color: #f5f7fa;
	padding: 20rpx ;
}
.logo {
  font-size: 28px;
  font-weight: bold;
  color: #2196F3;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  height: 64rpx;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.placeholder {
  color: #999;
  font-size: 14px;
  margin-left: 10rpx;
}

.sign-btn {
  margin-left: 20rpx;
}

.banner {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.banner-img {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 14px;
  color: #333;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
}

.tech-icon {
  width: 120rpx;
  height: 120rpx;
  /* margin-bottom: 10rpx; */
}

.tech-name {
  font-size: 14px;
  color: #333;

}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eee;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 4rpx;
}

.tab-text.active {
  color: #2196F3;
}
.courseName{
	font-size: 11rpx;
}
</style>

